<style lang="less" scoped src="./book.less"></style>
<script src="./book.js"></script>

<template>
    <div>
        <Row class="query">
            <Col span="22">
            教材名称 ：<Input v-model="query.name" clearable style="width: 17%"></Input>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="editModal"
                :title="editTitle"
                :mask-closable="isRead"
                :closable="isRead"
                width="65%">

            <Form :label-width="80" :model="formData" :rules="formDataRules" ref="formData">
                <Row>
                    <Col span="12">
                        <FormItem label="名称:" prop="name">
                            <Input v-model="formData.name" :clearable="!isRead" :readonly="isRead"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="价格(元):" prop="price">
                            <InputNumber v-model="formData.price"
                            :readonly="isRead"
                            :min="0"
                            style="width:100%;"
                            :formatter="value => `${value}`"></InputNumber>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="24">
                        <FormItem label="备注:" prop="remark">
                            <Input type="textarea" :rows="2" v-model="formData.remark" :clearable="!isRead" :readonly="isRead"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <!--<Row class="table-Row">-->
                <!--<Col span="4" class="titele"><span style="color: red">*</span>名称：</Col>-->
                <!--<Col span="8" class="content">-->
                <!--<Input v-model="formData.name" :clearable="!isRead" :readonly="isRead"></Input>-->
                <!--</Col>-->
                <!--<Col span="4" class="titele">价格（元）：</Col>-->
                <!--<Col span="8" class="content">-->
                <!--<InputNumber v-model="formData.price"-->
                             <!--:readonly="isRead"-->
                             <!--:min="0"-->
                             <!--style="width:100%;"-->
                             <!--:formatter="value => `${value}`"></InputNumber>-->
                <!--</Col>-->
            <!--</Row>-->
            <!--<Row class="table-Row">-->
                <!--<Col span="4" class="titele">作者：</Col>-->
                <!--<Col span="8" class="content">-->
                <!--<Input v-model="formData.author" :clearable="!isRead" :readonly="isRead" ></Input>-->
                <!--</Col>-->
                <!--<Col span="4" class="titele">版本：</Col>-->
                <!--<Col span="8" class="content">-->
                <!--<Input v-model="formData.edition" :clearable="!isRead" :readonly="isRead" ></Input>-->
                <!--</Col>-->
            <!--</Row>-->
            <!--<Row class="table-Row">-->
                <!--<Col span="4" class="titele">出版社：</Col>-->
                <!--<Col span="8" class="content">-->
                <!--<Input v-model="formData.press" :clearable="!isRead" :readonly="isRead" ></Input>-->
                <!--</Col>-->
                <!--<Col span="4" class="titele">是否启用：</Col>-->
                <!--<Col span="8" class="content">-->
                <!--<Select v-model="formData.status" :clearable="!isRead" :disabled="isRead">-->
                    <!--<Option v-for="item in selectYesOrNo" :value="item.id" :key="item.id">{{item.name}}</Option>-->
                <!--</Select>-->
                <!--</Col>-->
            <!--</Row>-->
            <!--<Row class="table-Row">-->
                <!--<Col span="4" class="titele">备注：</Col>-->
                <!--<Col span="20" class="content">-->
                <!--<Input type="textarea" :rows="2" v-model="formData.remark" :clearable="!isRead" :readonly="isRead"></Input>-->
                <!--</Col>-->
            <!--</Row>-->
            <div slot="footer" v-if="!isRead">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="editModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>